<template>
    <div>
        <span class="m-shadow" @click="closeServerStar"></span>
        <div class="m-server-star">
            <p class="m-title">服务之星</p>
            <ul class="m-starlist">
                <li v-for="(item,index) in scoreList" :key="index">
                    <span>NO.{{index+1}}</span>
                    <img :src="item.headImg || require('@/assets/images/my.png')" alt="">
                    <div>
                        {{item.Name}}
                        <p>累计星星{{item.PointScore}}颗</p>
                    </div>
                    <button @click="toAppointTime(index)">预约</button>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
import {pointScoreList} from '@/api/mine';
export default {
    name:'',
    data() {
        return {
            scoreList:[],
        }
    },
    methods: {
        // 关闭本弹窗
        closeServerStar() {
            this.$emit('closeServerStar');
        },
        // 获取服务之星列表
        getPointScoreList() {
            let param = {
                user_id:this.$utils.uid
            }
            pointScoreList(param).then((result) => {
                this.scoreList = result.list;
            }).catch((err) => {
                
            });
        },
        // 去预约
        toAppointTime(index) {
            let pointScore = this.scoreList[index];     //选择对应的服务之星去预约
            this.$router.push({path:'/'})
        }
    },
    mounted() {
        this.getPointScoreList();
    }
}
</script>
<style lang="less" scoped>
.m-server-star{
    position: fixed;
    z-index: 3;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width:80%;
    background: white;
    .border-radius(6px);
    .m-title{
        padding: .8rem;
        text-align: center;

    }
    .m-starlist{
        max-height: 50vh;
        overflow-y: scroll;
        li{
            .flex;
            border-top: 1px solid @background-gray;
            padding: .6rem .4rem;
            font-size: .9rem;
            span{
                width: 20%;
                color: @primary-purple;
                text-align: center;
            }
            img{
                width: 2rem;
                height: 2rem;
                .border-radius(100%);
            }
            div{
                flex:1;
                margin: 0 .4rem;
                p{
                    color: @light-gray;
                    font-size: .6rem;
                    margin-top: .4rem;
                }
            }
            button{
                border: 1px solid @primary-green;
                color: @primary-green;
                .border-radius(6px);
                padding: .2rem .6rem;
            }
        }
    }
}
</style>
